<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线分贝测试器 - 在线小应用合集</title>
    <link rel="stylesheet" href="../../styles/main.css">
    <link rel="stylesheet" href="styles/styles.css">
</head>
<body>
    <header>
        <div class="header-content">
            <a href="../../index.html" class="back-btn">← 返回主页</a>
            <h1>在线分贝测试器</h1>
        </div>
    </header>
    
    <main>
        <section class="sound-meter-container">
            <div class="meter-display">
                <div class="decibel-value">0</div>
                <div class="decibel-unit">dB</div>
            </div>
            
            <div class="meter-scale">
                <div class="scale-item safe">安静</div>
                <div class="scale-item moderate">中等</div>
                <div class="scale-item loud">吵闹</div>
                <div class="scale-item dangerous">危险</div>
            </div>
            
            <div class="meter-bar-container">
                <div class="meter-bar">
                    <div class="meter-fill" id="meterFill"></div>
                </div>
            </div>
            
            <!-- 波形可视化区域 -->
            <div class="waveform-container">
                <canvas id="waveformCanvas" class="waveform"></canvas>
            </div>
            
            <!-- 声音强度指示器 -->
            <div class="intensity-indicator">
                <div class="intensity-value" id="intensityValue">安静</div>
            </div>
            
            <div class="controls">
                <button id="startBtn" class="btn btn-primary">开始测量</button>
                <button id="stopBtn" class="btn btn-secondary" disabled>停止测量</button>
            </div>
            
            <div class="info-section">
                <h3>噪音等级参考</h3>
                <ul class="noise-reference">
                    <li><span>0-30 dB:</span> 非常安静（图书馆、轻声说话）</li>
                    <li><span>30-60 dB:</span> 中等（正常交谈、办公室环境）</li>
                    <li><span>60-90 dB:</span> 吵闹（交通噪音、大声音乐）</li>
                    <li><span>90-120 dB:</span> 危险（可能导致听力损伤）</li>
                </ul>
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2023 在线小应用合集</p>
    </footer>
    
    <script src="scripts/sound-meter.js"></script>
</body>
</html>